<template>
  <div class="custom-tree-select">
    <!-- 左侧sidebar -->
    <div class="xy-sidebar">
      <!-- 循环 -->
      <div class="xy-sidebar-item xy-sidebar-item--select">syx</div>
      <!-- 新增 -->

      <div></div>
    </div>
    <!-- 右侧内容 -->
    <div class="xy-content"></div>
  </div>
</template>

<script>
import { ref, computed } from "vue";

export default {
  props: {
    //
    items: {
      type: Array,
      default: () => [],
    },
    value: [String, Number],
  },
  emits: ["update:value"],
  setup(props, { emit }) {
    const activeId = ref(props.value);

    // 当前活跃项的计算属性
    const activeItem = computed(() => {
      return props.items.find((item) => item.id === activeId.value) || null;
    });

    // 点击项时更新活跃项
    const selectItem = (id) => {
      activeId.value = id;
      emit("update:value", id);
    };

    return { activeId, activeItem, selectItem };
  },
};
</script>

<style lang="less" scoped>
.custom-tree-select {
  position: relative;
  display: flex;
  width: 100%;
  height: 300px;

  .xy-sidebar {
    flex: 1;
    // background: #f08300;
    .xy-sidebar-item {
      padding: 10px;
    }
    .xy-sidebar-item--select::before {
      position: absolute;
      top: 50%;
      left: 0;
      width: 5px;
      height: 20px;
      background-color: #1989fa;
      transform: translateY(-50%);
      content: "";
    }
  }
  .xy-content {
    flex: 2;
    // background: #a08100;
  }
}
</style>
